<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <el-input placeholder="设备名称" v-model="searchrepair.ep_ename" style="width:20%;margin-right:10px" clearable></el-input>

      <el-input placeholder="规格型号" v-model="searchrepair.scale" style="width:20%;margin-right:10px" clearable></el-input>
      <el-input placeholder="管理编号" v-model="searchrepair.managenum" style="width:20%;margin-right:10px" clearable></el-input>
      <el-date-picker v-model="repairdate" clearable style="margin-right:15px;width:25%" type="daterange"
        rangeSeparator="至" startPlaceholder="申请时间" endPlaceholder="申请时间" valueFormat="yyyy-MM-dd"
      ></el-date-picker>
      <el-input placeholder="申请人" v-model="searchrepair.sqrname" style="width:20%;margin-right:10px" clearable></el-input>
      <el-select v-model="searchrepair.repair_type" placeholder="请选择处理方式" style="width:20%;margin-right:10px" clearable>
        <el-option v-for="item in repairtypeArr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-select v-model="searchrepair.status" placeholder="请选择审核状态" style="width:20%;margin-right:10px" clearable>
        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-button size="mini" type="primary" @click="geteqrepairList">搜索</el-button>
    </el-row>
    <el-button size="mini" type="primary" @click="doprint">打印</el-button>
    <el-divider></el-divider>
    <repairList :eqrepairList="eqrepairList" :choosedp.sync="choosedp" :pagobj.sync="pagobj" :ismanager="true"
      :islast="true"
    ></repairList>
    <el-dialog :visible.sync="innerVisible33" top="0" width="650px">
      <el-button size="mini" type="primary" @click="print">打印</el-button>
      <div id="printrecord">
        <div>
          <div style="line-height:10px;text-align:right;font-weight:bold;font-size:16px;margin-right:25px;">
            <span>JBR/QR29-9</span>
          </div>
          <div style="height:50px;line-height:50px;font-size:20px;text-align:center;font-weight:600;color:#333">仪器设备维修申请/审批表</div>
          <div class="tablediv">
            <span style="border-bottom:0">仪器设备名称</span>
            <span style="border-left:0;border-right:0;border-bottom:0">{{shrecordData.ep_ename}}</span>
            <span style="border-bottom:0">型号</span>
            <span style="border-left:0;border-bottom:0">{{shrecordData.scale}}</span>
          </div>
          <div class="tablediv">
            <span style="border-bottom:0">编号</span>
            <span style="border-left:0;border-right:0;border-bottom:0">{{shrecordData.managenum}}</span>
            <span style="border-bottom:0">处理方式</span>
            <span style="border-left:0;border-bottom:0">
              <b v-for="(item, index) in repairtypeArr" :key="index" style="margin-right:10px">
                <input type="checkbox" :id="index" :name="item.hash.code_name" :value="item.hash.code_id"
                  :checked="item.hash.code_id==shrecordData.repair_type" onclick="return false;"
                />
                <label :for="index">{{item.hash.code_name}}</label>
              </b>
            </span>
          </div>
          <div class="tablediv" style="position:relative">
            <span style="width:100%;height:100%;padding:20px;min-height:25vh;border-bottom:0">
              <p style="height:70px;line-height:70px;text-align:left">故障现象与维修要求：{{shrecordData.sq_content}}</p>
              <div style="display:flex;justify-content:space-around;margin-top:80px;">
                <b style="">
                  申请人：
                  <img :src="shrecordData.sqr_signature" style="width:60px;"/>
                </b>
                <div style="display:flex;width:200px;">
                  <span style="width:50%;text-align:right">日期：</span>
                  <span style="width:50%;">{{shrecordData.sqtime}}</span>
                </div>
              </div>
            </span>
          </div>
          <div class="tablediv" style="position:relative">
            <span style="width:100%;height:100%;padding:20px;min-height:25vh;border-bottom:0">
              <p style="height:70px;line-height:70px;text-align:left">批准意见：{{shrecordData.pz_content}}</p>
              <div style="display:flex;justify-content:space-around;margin-top:80px;">
                <b style>
                  批准：
                  <img :src="shrecordData.pzr_signature" style="width:60px;"/>
                </b>
                <div style="display:flex;width:200px;">
                  <span style="width:50%;text-align:right">日期：</span>
                  <span style="width:50%;">{{shrecordData.pztime}}</span>
                </div>
              </div>
            </span>
          </div>

          <div class="tablediv" style="position:relative;border-bottom:1px solid #333">
            <span style="width:100%;height:100%;padding:20px;min-height:25vh;border-bottom:0">
              <p style="height:70px;line-height:70px;text-align:left">处理记录：{{shrecordData.cl_content}}</p>
              <div style="display:flex;justify-content:space-around;margin-top:80px;">
                <b style>处理人：{{shrecordData.clr}}</b>
                <div style="display:flex;width:200px;">
                  <span style="width:50%;text-align:right">日期：</span>
                  <span style="width:50%;">{{shrecordData.cltime}}</span>
                </div>
              </div>
            </span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import repairList from '~/components/apparatus/eqrepair/repairList.vue';
import neweqrepair from '~/components/apparatus/eqrepair/neweqrepair.vue';

export default {
  components: {
    repairList,
    neweqrepair,
  },
  data() {
    return {
      innerVisible33: false,
      ts: this.newStore(),
      shrecordData: {},
      searchrepair: {},
      isedit: false,
      repairdate: ['', ''],
      eqrepairList: [],
      choosedp: [],
      editdata: {},
      repairtypeArr: [],
      statusArr: [
        {
          label: '待审核',
          value: '0',
        },
        {
          label: '审核通过',
          value: '1',
        },
        {
          label: '已填写处理记录',
          value: '3',
        },
      ],
      isneweqrepair: false,
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
    };
  },
  created() {
    this.getcodeData('0404', '04', 'repairtypeArr');
    this.geteqrepairList();
  },
  methods: {
    print() {
      this.$nextTick(() => {
        const detailContent = document.getElementById('printrecord');
        Print('#printrecord');
      });
    },
    doprint() {
      this.shrecordData = {};
      if (this.choosedp.length == 0) {
        this.$message({
          type: 'info',
          message: '请先勾选维修记录',
        });
        return;
      }
      if (this.choosedp.length > 1) {
        this.$message({
          type: 'info',
          message: '只能打印一条维修记录',
        });
        return;
      }
      if (this.choosedp[0].hash.status != 3) {
        this.$message({
          type: 'info',
          message: '只有已上传记录状态记录才能打印',
        });
        return;
      }
      const req = {
        handle:
          'DD5D108B99FC12B78456C40D977EBA89DCCC094D1456DACEBD22D20EE9E37CCC499FC256E42DA56C',
        rid: this.choosedp[0].hash.rid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.shrecordData = ts.d.data.operation1[0].hash;
        this.innerVisible33 = true;
      });
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },

    geteqrepairList() {
      if (this.repairdate == null) {
        this.repairdate = [];
      }
      const req = this.searchrepair;
      req.handle =
        'DD5D108B99FC12B78456C40D977EBA89DCCC094D1456DACED880EEABFCB4D9F1627154A1FBB7F4B9';
      [req.sqtime_begin] = [this.repairdate[0]];
      [req.sqtime_end] = [this.repairdate[1]];
      req.start = (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize;
      req.limit = this.pagobj.pagesize;
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.eqrepairList = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
  },
};
</script>
<style>
.tablediv {
  display: flex;
  justify-content: space-around;
}
.tablediv > span {
  border: 1px solid #333;
  display: inline-block;
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>

